<template>
  <div>
    <div class="login_box" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
      <!-- 登录表单区域 -->
      <el-form size="mini" title="用户登录" class="elform">
        <!-- 用户名 -->
        <el-form-item>
          <h2 style="margin-left:-15px">账号:</h2>
          <el-input
            placeholder="请输入账号"
            prefix-icon="el-icon-s-custom"
            v-model="selectAdmin.id"
            size="big"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item style="margin-bottom:80px">
          <h2 style="margin-left:-15px">密码:</h2>
          <el-input
            placeholder="请输入密码"
            v-model="selectAdmin.pwd"
            show-password
            prefix-icon="el-icon-key"
            size="big"
          ></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            @click="check(selectAdmin.id)"
            class="detailed"
            size="small"
            style="margin-bottom:50px"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height:100%"
    >
    </vue-particles>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectAdmin: {
        id: '',
        name: '',
        tel: '',
        pwd: ''
      },
      tableData: []
    }
  },
  created () {
    this.$ajax('/admin/adminAll')
      .then(res => {
        this.tableData = res.data
        console.log(res.data)
      })
      .catch(function (error) {
        console.log(error)
      })
  },
  methods: {
    check (id) {
      this.$ajax({
        method: 'get',
        url: '/admin/login',
        params: { id: id }
      })
        .then(res => {
          console.log(res.data)
          // console.log(this.selectUser.psw)
          // eslint-disable-next-line eqeqeq
          if (res.data == this.selectAdmin.pwd && this.selectAdmin.pwd !== '') {
            this.getadminName(id)
          } else {
            this.showerror()
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getadminName (id) {
      this.$ajax({
        method: 'get',
        url: '/admin/findAdminName',
        params: { id: id }
      })
        .then(res => {
          console.log(res.data)
          this.adminName = res.data
          this.$emit('getAdminName', this.adminName)
          this.jump()
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    showerror () {
      this.$alert('密码错误或账号未注册', '错误', {
        confirmButtonText: '确定'
      })
    },
    jump () {
      this.$router.push('manageinfo')
    }
  }
}
</script>

<style scoped>
.login_box {
  width: 500px;
  height: 450px;
  /* background-color: #fff; */
  background-color: #ffffffb3;
  border-radius: 5px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.elform {
  padding: 32px;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.el-button {
  width: 100%;
}
</style>
